<!DOCTYPE html>
<html lang="en">

<head>
  <style>
    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
    #qrcode {
  position: absolute; /* 绝对定位 */
  bottom: 0px;      /* 距离容器底部10px */
  left: 10px;        /* 距离容器左边10px */
  width: 200px;
  height: 200px;
}

    #message-container {
      /* position: relative; */
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      border: 1px solid #ccc;
      padding: 10px;
      overflow: hidden;
    }

    #message-container::before {
      content: '';
      /* 必须设置，即使为空 */
      height: 100%;
      width: 100%;
      position: absolute;
      z-index: -1;
      background-image: url("../../img/bg1.png");
      background-size: cover;
      /* 拉伸填充整个元素 */
      background-repeat: no-repeat;
      /* 不重复 */
      -webkit-filter: opacity(50%);
      filter: opacity(50%);
    }

    .message {
      position: relative;
      /* 更改为相对定位 */
      display: inline-block;
      white-space: nowrap;
      animation: scroll linear infinite;
    
    }
    /* 定义滚动动画 */
    @keyframes scroll {
      0% {
        right: 100%;
      }
      100% {
        left: 0%;
      }
    }
  </style>
  <meta charset="UTF-8">
  <title>展示留言</title>

</head>

<body>
  <!-- <h1>留言随机滚动页面</h1> -->

  <div id="message-container">
    <h1 style="text-align: center; font-family:cursive" ;>信息工程学院留言墙</h1>
    <img src="../../img/qrcode.png" alt="" id="qrcode">
  </div>
  <script>

    function getRandomColor() {
      const letters = '0123456789ABCDEF';
      let color = '#';
      for (let i = 0; i < 6; i++) {
        color += letters[Math.floor(Math.random() * 16)];
      }
      return color;
    }

    // 函数生成随机字体大小，假设范围在12px到24px之间
    function getRandomFontSize() {
      return `${Math.floor(Math.random() * (24 - 12 + 1)) + 12}px`;
    }


    // 用来存储当前已知的最新留言ID
    let lastMessageId = 0;

    const container = document.getElementById('message-container');

    function showMessage(name, content) {
      const messageElement = document.createElement('span');
      messageElement.classList.add('message');
      messageElement.textContent = `${name}: ${content}`;

      // 随机生成滚动延迟时间
      const randomDelay = Math.random() * 5 + 1; // 范围在 1 到 6 秒之间

      messageElement.style.animationDuration = `${container.offsetHeight / 20}s`; // 根据容器高度计算滚动速度
      messageElement.style.animationDelay = `${randomDelay}s`;

      // 随机生成留言元素的初始垂直位置
      const randomPositionY = Math.random() * (container.offsetHeight - messageElement.offsetHeight);
      messageElement.style.top = `${randomPositionY}px`; // 设置初始垂直位置

      // 随机生成留言元素的初始水平位置
      const randomPositionX = Math.random() * (container.offsetWidth - messageElement.offsetWidth);
      messageElement.style.left = `${randomPositionX}px`; // 设置初始水平位置
      // 设置随机颜色和随机字体大小
      messageElement.style.color = getRandomColor();
      messageElement.style.fontSize = getRandomFontSize();

      container.appendChild(messageElement);
    }



    function fetchMessages() {
      fetch('/api/messages')
        .then(response => response.json())
        .then(data => {
          const messagesContainer = document.getElementById('message-container');

          // 筛选出新的留言（ID大于lastMessageId的留言）
          const newMessages = data.filter(message => message.id > lastMessageId);

          // 添加新留言到DOM中，并更新lastMessageId
          newMessages.forEach(message => {
            showMessage(message.name, message.content);
            lastMessageId = message.id; // 更新最新留言ID为当前留言的ID
          });
        })
        .catch((error) => {
          console.error('Error:', error);
        });
    }

    // 每隔5秒钟请求一次最新的留言
    setInterval(fetchMessages, 5000);

    window.onload = fetchMessages; // 页面加载时也获取一次留言
  </script>
</body>

</html>